<template>
  <div>
    <div class="top_banner">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(slide, index) in banner" :key="index">
          <img :src="slide" alt style="width:100%;display:block;" />
        </swiper-slide>
      </swiper>
      <div class="swiper-Btn-next server_nextBtn"></div>
      <div class="swiper-Btn-prev server_prevBtn"></div>
    </div>
    <p class="nextAndPrev">
      <router-link to class="nextAndPrevText">上一篇：2019美国建筑材料展、建筑设计展、石材展、木材展、陶瓷展、五金展、泵阀展2月19日举办 时间 地点</router-link>
    </p>
    <p class="nextAndPrev">
      <router-link to class="nextAndPrevText">下一篇：美国拉斯维加斯国际地面材料及瓷砖展览会参展费用及步骤</router-link>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        //   pagination: {
        //     el: '.swiper-pagination'
        //   },
        slidesPerView: 4,
        // 底部间距
        spaceBetween: 6,
        // slidesPerGroup: 5,
        loop: true,
        autoplay: true,
        loopFillGroupWithBlank: true,
        navigation: {
          nextEl: ".server_nextBtn",
          prevEl: ".server_prevBtn"
        }
      },
      banner: [
        "../../assets/consolut/1.jpg",
        "../../assets/consolut/2.jpg",
        "../../assets/consolut/3.jpg",
        "../../assets/consolut/4.jpg",
        "../../assets/consolut/5.jpg"
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.top_banner {
  width: 100%;
  height: 160px;
  padding: 20px 0 16px;
  position: relative;
  .swiper-container {
    width: 774px;
    height: 100%;
    //   padding: 0px 20px;
    box-sizing: border-box;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-Btn-next,
  .swiper-Btn-prev {
    position: absolute;
    z-index: 10;
    width: 20px;
    height: 44px;
    text-align: center;
    //   line-height: 30px;
    //   font-size: 24px;
    top: 50%;
    margin-top: -22px;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .swiper-Btn-prev {
    left: 0;
    background-image: url("../../assets/banner_prev.png");
  }
  .swiper-Btn-next {
    right: 0;
    background-image: url("../../assets/banner_next.png");
  }
}
.nextAndPrev {
  height: 36px;
  line-height: 36px;
  text-align: left;
  .nextAndPrevText {
    font-size: 14px;
    color: #848484;
  }
  .nextAndPrevText:hover {
    text-decoration-line: underline;
    color: #c81622;
  }
}
</style>